<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .searchBar {
            width: 1126px;
            margin: 100px auto;
            height: 45px;
            border: 1px solid #333;
            display: flex;
            position: relative;
        }

        .searchBar .searchCon {
            flex: 1;
            outline: none;
            border: 0;
            padding: 0;
            text-indent: 10px;
        }

        .searchBar .searchBtn {
            width: 120px;
            height: 45px;
            background-color: grey;
            text-align: center;
            line-height: 45px;
        }

        .searchList {
            width: 1006px;
            padding-top: 10px;
            position: absolute;
            top: 45px;
        }

        .searchList li {
            line-height: 32px;
            text-indent: 10px;
            font-size: 14px;
        }

        .searchList li:hover {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="searchBar">
        <input type="text" class="searchCon"><a href="" class="searchBtn">搜索一下</a>
        <ul class="searchList">
            <!-- <li>111111111</li>
            <li>111111111</li>
            <li>111111111</li>
            <li>111111111</li> -->
        </ul>
    </div>
</body>
<script>
    // 商品的动态生成   =>  模板字符串 => 可以根据既定的模板批量生成

    // jsonp 接口 :https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=h56&cb=jQuery1102043335964170523367_1636105005213

    // 参数: 
    // wd  搜索的关键词
    // cb  接收回调函数的字段名  

    // 返回数据:
    /* {
        g: [  // 搜索的数据
            {
                q, 搜索得到内容
            }
        ]
    } */
    var searchCon = document.getElementsByClassName("searchCon")[0];
    var searchList = document.getElementsByClassName("searchList")[0];

    searchCon.oninput = function(){
        var key = searchCon.value;
        var script = document.createElement("script");
        script.src = `https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=${key}&cb=fn`;
        document.body.appendChild(script);
        script.onload = function () {// 请求成功 => 数据 =>等脚本中的数据载入完毕 => 删除脚本
            script.remove();
        }
    }

    function fn(data) { //拿到数据动态生成
        console.log(data);
        var { g } = data;
        var html = "";
        if (g) {
            g.forEach(({ q }) => {
                html += `<li>${q}</li>`;
            })
        }
        searchList.innerHTML = html;
    }
</script>
</html>